<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>:·.∵·∴</title>
    <style>
        *,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            flex-direction: column;
            height: 100vh;
            background-color: #ddd;
        }

        .box {
            position: relative;
            width: 90%;
            height: 90%;
            border: 10px solid skyblue;
            border-style: double;
            border-radius: 35px;
            background-color: #fff;
        }

        .box textarea {
            position: absolute;
            top: 10%;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            min-height: 150px;
            font-size: 32px;
            padding-left: 20px;
            padding-right: 20px;
        }

        .box textarea:nth-of-type(2) {
            top: 45%;
        }

        .box .buttonBox {
            position: absolute;
            width: 400px;
            bottom: 10%;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: space-between;
        }

        button {
            width: 150px;
            height: 50px;
            float: left;
            font-size: 32px
        }
    </style>
</head>
<div class="box">
    <textarea type="text" placeholder="输入内容" value="" id="content"></textarea>
    <textarea type="text" placeholder="转换结果" value="" id="result"></textarea>
    <div class="buttonBox">
        <button id="to">转成点点</button>
        <button id="from">转成文字</button>
    </div>
</div>
<div class="test">⢧⠦⠈⠓⡶⣠⠚⠁⣄⢦⣀⢤⠳⢿⡇⢈⠲⠛⠙⡀⢳⣆⠘⠉⠖⠶⠶⣇⠒⡙⢄⣼</div>
<footer>
    &copy;:·.
</footer>

<body>
    <script>
        var btnTo = document.querySelector('#to')
        var btnFrom = document.querySelector('#from')
        var content = document.querySelector('#content')
        var result = document.querySelector('#result')

        // 点转文字
        function changeFrom(str) {
            var newStr;
            // 先转换标点
            newStr = str.replaceAll('•', '。').replaceAll('・', ' ').replaceAll('∵∵', '(').replaceAll('∴∴', '[').replaceAll('∷∷', '{');
            // 转换数字
            newStr = newStr.replaceAll('∷．', '+').replaceAll('∷﹒', '-').replaceAll('∷.', '*').replaceAll('∷·', '/').replaceAll('∷¨', '%').replaceAll('∷‥', '>').replaceAll('∷:', '<').replaceAll('∷：', '=').replaceAll('∷﹕', '?').replaceAll('∷︰', ':').replaceAll('∷∶', '\'').replaceAll('∷…', '"').replaceAll('∷˙', ',');
            // 转前13个英文
            newStr = newStr.replaceAll('∵．', 'a').replaceAll('∵﹒', 'b').replaceAll('∵.', 'c').replaceAll('∵·', 'd').replaceAll('∵¨', 'e').replaceAll('∵‥', 'f').replaceAll('∵:', 'g').replaceAll('∵：', 'h').replaceAll('∵﹕', 'i').replaceAll('∵︰', 'j').replaceAll('∵∶', 'k').replaceAll('∵…', 'l').replaceAll('∵˙', 'm');
            // 转后13个英文
            newStr = newStr.replaceAll('∴．', 'n').replaceAll('∴﹒', 'o').replaceAll('∴.', 'p').replaceAll('∴·', 'q').replaceAll('∴¨', 'r').replaceAll('∴‥', 's').replaceAll('∴:', 't').replaceAll('∴：', 'u').replaceAll('∴﹕', 'v').replaceAll('∴︰', 'w').replaceAll('∴∶', 'x').replaceAll('∴…', 'y').replaceAll('∴˙', 'z');
            // 转无标识的为数字
            newStr = newStr.replaceAll('．', '1').replaceAll('﹒', '2').replaceAll('.', '3').replaceAll('·', '4').replaceAll('¨', '5').replaceAll('‥', '6').replaceAll(':', '7').replaceAll('：', '8').replaceAll('﹕', '9').replaceAll('︰', '0').replaceAll('∶', '&').replaceAll('…', '|').replaceAll('˙', '!');
            //转换单独的标识符
            newStr = newStr.replaceAll('∵', ')').replaceAll('∴', ']').replaceAll('∷', '}')
            // 这里也可以先全转成数字,然后再转英文,这样打的还方便些
            
            // console.log(newStr);
            return newStr;
        }

        //文字转点
        function changeTo(str) {
            var newStr;
            // 把大小写转换掉
            newStr = str.toLowerCase()
            // 转换标点
            newStr = newStr.replaceAll('。', '•').replaceAll(' ', '・');
            // 转换数字
            newStr = newStr.replaceAll('+', '∷．').replaceAll('-', '∷﹒').replaceAll('*', '∷.').replaceAll('/', '∷·').replaceAll('%', '∷¨').replaceAll('>', '∷‥').replaceAll('<', '∷:').replaceAll('=', '∷：').replaceAll('?', '∷﹕').replaceAll(':', '∷︰').replaceAll('\'', '∷∶').replaceAll('"', '∷…').replaceAll(',', '∷˙');
            // 转前13个英文
            newStr = newStr.replaceAll('a', '∵．').replaceAll('b', '∵﹒').replaceAll('c', '∵.').replaceAll('d', '∵·').replaceAll('e', '∵¨').replaceAll('f', '∵‥').replaceAll('g', '∵:').replaceAll('h', '∵：').replaceAll('i', '∵﹕').replaceAll('j', '∵︰').replaceAll('k', '∵∶').replaceAll('l', '∵…').replaceAll('m', '∵˙');
            // 转后13个英文
            newStr = newStr.replaceAll('n', '∴．').replaceAll('o', '∴﹒').replaceAll('p', '∴.').replaceAll('q', '∴·').replaceAll('r', '∴¨').replaceAll('s', '∴‥').replaceAll('t', '∴:').replaceAll('u', '∴：').replaceAll('v', '∴﹕').replaceAll('w', '∴︰').replaceAll('x', '∴∶').replaceAll('y', '∴…').replaceAll('z', '∴˙');
            // 转无标识的为数字
            newStr = newStr.replaceAll('1', '．').replaceAll('2', '﹒').replaceAll('3', '.').replaceAll('4', '·').replaceAll('5', '¨').replaceAll('6', '‥').replaceAll('7', ':').replaceAll('8', '：').replaceAll('9', '﹕').replaceAll('0', '︰').replaceAll('&', '∶').replaceAll('|', '…').replaceAll('!', '˙');
            //转换单独的标识符
            newStr = newStr.replaceAll('(', '∵∵').replaceAll(')', '∵').replaceAll('[', '∴∴').replaceAll(']', '∴').replaceAll('{', '∷∷').replaceAll('}', '∷')

            // console.log(newStr);
            return newStr;
        }
        btnTo.onclick = function () {
            result.value = changeTo(content.value)
        }
        btnFrom.onclick = function () {
            result.value = changeFrom(content.value)
        }
    </script>
</body>

</html>